//渲染页面
function gettr() {
    //渲染页面
    $('tbody').empty()
    axios.get('http://api-breakingnews-web.itheima.net/my/article/cates', {
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(function (test) {
        console.log(test)
        if (test.data.status === 0) {
            let data = test.data.data
            data.forEach(function (obj) {
                let tr = `<tr>
            <td>${obj.name}</td>
            <td>${obj.alias}</td>
            <td>
              <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
        
              <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`
                $('tbody').append(tr)
            })
        }
    })
}

gettr()

let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;
//添加分类
$('.add').on('click', function (e) {
    e.preventDefault()
    let index = layer.open({
        type: 1,
        title: "新增分类",
        area: ['500px', '300px'],
        content: add_str, //这里content是一个普通的String
        success: function () {
            $('.add-form').on('submit', function (e) {
                e.preventDefault()
                let data = $('form').serialize()

                axios.post('http://api-breakingnews-web.itheima.net/my/article/addcates', data, {
                    headers: {
                        Authorization: localStorage.getItem('token')
                    }
                }).then(function (test) {

                    layer.msg(test.data.message)
                    layer.close(index)
                    gettr()
                })
            })


        }
    });
})


const form = layui.form;
form.verify({
    ctname: [
        /^[\u4E00-\u9FA5]+$/,
        "分类名只能是中文"
    ],
    aliname: [
        /^[a-z0-9]+$/,
        "小写英文和数字组成"
    ]
})


//删除分类
$('tbody').on('click', '.delete', function () {
    let id = $(this).attr('myid')
    axios.get(`http://api-breakingnews-web.itheima.net/my/article/deletecate/${id}`, {
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(function (test) {
        if (test.data.status === 0) {
            layer.msg(test.data.message)
            gettr()
        }
    })
})


//编辑分类
let edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
$('tbody').on('click', '.edit', function (e) {
    e.preventDefault()
    let name = $(this).attr('data-name')
    let alias = $(this).attr('data-alias')
    let Id = $(this).attr('myid')
    console.log(name, alias)
    let index = layer.open({
        type: 1,
        title: "新增分类",
        area: ['500px', '300px'],
        content: edit_str, //这里content是一个普通的String
        success: function () {
            $('input[name=name]').val(name)
            $('input[name=alias]').val(alias)

            $('.add-form').on('submit', function (e) {
                e.preventDefault()
                $('.add-form input[type=hidden]').val(Id)
                let data = $('.add-form').serialize()

                axios.post('http://api-breakingnews-web.itheima.net/my/article/updatecate', data, {
                    headers: {
                        Authorization: localStorage.getItem('token')
                    }
                }).then(function (test) {
                    console.log(test)
                    layer.msg(test.data.message)
                    layer.close(index)
                    gettr()
                } )
            })

        }
    });

    $()
})



